<template>
  <el-card class="box">
    <div id="my-three-text"></div>
  </el-card>
</template>

<script setup>
  import * as THREE from "three";
  import { FontLoader } from "three/addons/loaders/FontLoader.js";
  import { onMounted } from "vue";
  //创建一个三维场景
  const scene = new THREE.Scene();
  const width = window.innerWidth;
  const height = window.innerHeight;
  // 相机
  var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  // 渲染器
  var renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  renderer.render(scene, camera);

  var loader = new FontLoader(); // 创建字体加载器对象

  loader.load("path_to_fontfile", (font = "6666") => {
    // 从路径加载字体文件
    var textGeometry = new THREE.TextBufferGeometry("Hello World", {
      font: font,
      size: 80,
      height: 40,
      curveSegments: 12,
      bevelEnabled: false,
    }); // 创建文本几何体对象
    var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 创建基本材质对象
    var mesh = new THREE.Mesh(textGeometry, material); // 创建网格对象
    scene.add(mesh); // 将网格对象添加到场景中
  });

  function animate() {
    // requestAnimationFrame(animate); // 动画循环函数
    renderer.render(scene, camera); // 渲染场景和相机
  }

  onMounted(async () => {
    animate(); // 开始动画循环

    alert("需要三方字体库");

    await document
      .getElementById("my-three-text")
      ?.appendChild(renderer.domElement);
  });
</script>

<style lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
  }
</style>
